<template>
  <div>
	  <div class="ant-pro-page-header-search">
	    <a-input-search size="large" style="width: 80%; max-width: 522px;" v-model="queryParam.title" @search="getList">
	      <template v-slot:enterButton>
	        搜索
	      </template>
	    </a-input-search>
		<a-button type="danger" size="large" @click="queryParam={}">重置</a-button>
	  </div>
    <a-card :bordered="false" class="ant-pro-components-tag-select">
      <a-form layout="inline">
        <standard-form-row title="搜索条件" grid last>
          <a-row>
            <a-col :lg="8" :md="10" :sm="10" :xs="24">
              <a-form-item :wrapper-col="{ sm: { span: 16 }, xs: { span: 24 } }" label="薪资">
                <a-select
                  style="max-width: 200px; width: 100%;"
                  placeholder="请选择"
                  v-model="queryParam.salary"
                >
                  <a-select-option value="low">5000以下</a-select-option>
				  <a-select-option value="middle">5000到15000</a-select-option>
				  <a-select-option value="high">15000以上</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
			<a-col :lg="8" :md="10" :sm="10" :xs="24">
			  <a-form-item :wrapper-col="{ sm: { span: 16 }, xs: { span: 24 } }" label="招聘人数">
			    <a-select
			      style="max-width: 200px; width: 100%;"
			      placeholder="请选择"
			      v-model="queryParam.nums"
			    >
			      <a-select-option value="low">20人以下</a-select-option>
				  <a-select-option value="middle">20人到100人</a-select-option>
				  <a-select-option value="high">100人以上</a-select-option>
			    </a-select>
			  </a-form-item>
			</a-col>
          </a-row>
        </standard-form-row>
      </a-form>
    </a-card>

    <div class="ant-pro-pages-list-projects-cardList">
      <a-list :loading="loading" :data-source="data" :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card class="ant-pro-pages-list-projects-card" hoverable @click="go(item.id)">
            <a-card-meta :title="item.title">
              <template slot="description">
				 岗位：<a-tag color="pink">{{item.job}}</a-tag> 薪资：<a-tag color="pink">{{item.salary}}</a-tag> 招聘人数：<a-tag color="pink">{{item.nums}}</a-tag>
              </template>
            </a-card-meta>
            <div class="cardItemContent">
              <span>{{ item.updateTime | fromNow }}</span>
              <div class="avatarList">
				<a-avatar size="small" :src="item.creater.avatar | avatarFilter" />
              </div>
            </div>
          </a-card>
        </a-list-item>
				<div slot="footer" v-if="data.length > 0" style="text-align: center; margin-top: 16px;">
				  <a-button @click="loadMore" :loading="loadingMore">加载更多</a-button>
				</div>
      </a-list>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { StandardFormRow } from '@/components'
import { page } from '@/api/recruit'

export default {
  components: {
    StandardFormRow
  },
  data () {
    return {
      data: [],
      loading: true,
	  loadingMore: false,
	  // 查询参数
	  queryParam: {
		  title: null,
		  status: 1
	  },
	  pageNo: 1,
	  pageSize: 10
    }
  },
  filters: {
    fromNow (date) {
      return moment(date).fromNow()
    },
	avatarFilter (avatar) {
		if(avatar){
			return "http://localhost:8080/static/" + avatar
		}else{
			return "https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"  //默认头像
		}
	}
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
		const requestParameters = Object.assign({}, {pageNo:this.pageNo,pageSize:this.pageSize}, {parameter:this.queryParam})
		page(requestParameters).then(res => {
			console.log('res', res)
			if(res.code == 200){
				  this.data = res.data.result
				  this.loading = false
			}
		})
    },
	loadMore () {
	  this.loadingMore = true
	const requestParameters = Object.assign({}, {pageNo:this.pageNo + 1,pageSize:this.pageSize}, {parameter:this.queryParam})
	page(requestParameters).then(res => {
		console.log('res', res)
		if(res.code == 200){
	  this.data = this.data.concat(res.data.result)
	  this.loading = false
		}
	}).finally(() => {
	    this.loadingMore = false
	  })
	},	
	go(id){
		this.$router.push({
		    name:"RecruitDetail",
		    params:{
		        id:id
		    }
		})
	}
  }
}
</script>

<style lang="less" scoped>
	
.ant-pro-page-header-search {
  text-align: center;
  margin-bottom: 16px;
}

.ant-pro-pages-list-projects-cardList {
  margin-top: 24px;

  :deep(.ant-card-meta-title) {
    margin-bottom: 4px;
  }

  :deep(.ant-card-meta-description) {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }

  .cardItemContent {
    display: flex;
    height: 20px;
    margin-top: 16px;
    margin-bottom: -4px;
    line-height: 20px;

    > span {
      flex: 1 1;
      color: rgba(0,0,0,.45);
      font-size: 12px;
    }

    :deep(.ant-pro-avatar-list) {
      flex: 0 1 auto;
    }
  }
}
</style>
